<template>
	<div class="login-container flx-center">
		<SwitchDark class="dark" />
		<div class="login-box">
			<div class="login-left">
				<img src="@/assets/images/login_left0.png" alt="login" />
			</div>
			<div class="login-form">
				<div class="login-logo">
					<img class="login-icon" src="@/assets/images/logo.svg" alt="" />
					<h2 class="logo-text">TinyTimi-Admin</h2>
				</div>
				<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
					<el-form-item prop="username">
						<el-input v-model="loginForm.username" placeholder="用户名">
							<template #prefix>
								<el-icon class="el-input__icon"><user /></el-icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="loginForm.password" placeholder="密码" show-password>
							<template #prefix>
								<el-icon class="el-input__icon"><lock /></el-icon> </template
						></el-input>
					</el-form-item>
				</el-form>
				<div class="login-btn">
					<el-button :icon="CircleClose" round @click="resetForm(loginFormRef)" size="large">重置</el-button>
					<el-button :icon="UserFilled" round @click="login(loginFormRef)" size="large" type="primary" :loading="loading">
						登录
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup name="login">
import { Login } from "@/api/interface";
import { reactive, ref, onMounted } from "vue";
import { CircleClose, UserFilled } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import SwitchDark from "@/components/SwitchDark/index.vue";
import { getInfoApi, loginApi } from "@/api/modules/login";
import { useRouter } from "vue-router";
import { GlobalStore } from "@/stores";
import { AuthStore } from "@/stores/modules/auth";
import { TabsStore } from "@/stores/modules/tabs";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import { ElNotification } from "element-plus";
import { getTimeState } from "@/utils/util";

const router = useRouter();
const globalStore = GlobalStore();
const authStore = AuthStore();
const tabsStore = TabsStore();

const loading = ref(false);
const loginForm = reactive<Login.ReqLoginForm>({
	username: "admin",
	password: "123456",
	grant_type: "password",
	client_id: "client-app",
	client_secret: "123456"
});
const loginRules = reactive<FormRules>({
	username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});
// 定义 formRef 校验规则
const loginFormRef = ref<FormInstance>();
const login = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async valid => {
		if (!valid) return;
		loading.value = true;
		try {
			// 1.执行登录接口
			const data = await loginApi({ ...loginForm });
			globalStore.setToken((data.result as any).tokenValue);
			const { result } = await getInfoApi();
			globalStore.setUserInfo(result);

			// 2.添加动态路由
			await initDynamicRouter();

			// 3.清除上个账号的tab信息
			tabsStore.closeMultipleTab();

			// 4.跳转到首页
			router.push((authStore.authMenuListGet[0] as any).path);
			ElNotification({
				title: getTimeState(),
				message: "欢迎登录 TinyTimi-Admin",
				type: "success",
				duration: 3000
			});
		} finally {
			loading.value = false;
		}
	});
};
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};

onMounted(() => {
	// 监听enter事件（调用登录）
	document.onkeydown = (e: any) => {
		e = window.event || e;
		if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
			if (loading.value) return;
			login(loginFormRef.value);
		}
	};
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
